<script setup lang='ts'>
import { ref, onMounted } from "vue"
import { getPublishNavInfo } from "@/api/index"
import { useRouter } from 'vue-router'
import BookViewFirst from "@/components/BookViewFirst.vue"
import LoadingPage from "@/components/LoadingPage.vue"
const $router = useRouter()
const publishBookInfo = ref<any>()
const isLoading = ref<boolean>(true)
onMounted(async () => {
    let res = await getPublishNavInfo($router.currentRoute.value.query.url)
    publishBookInfo.value = res.data.data
    isLoading.value = false;

})
</script>

<template>
    <div>
        <LoadingPage v-if="isLoading" />
        <div class="publish" v-else>
            <div class="publish-title" v-if="publishBookInfo">
                <img src="@/assets/imgs/返回1.png" alt="" @click="$router.back()">
                <span>{{ publishBookInfo.title }}</span>
                <span></span>
            </div>
            <div class="publish-list" v-if="publishBookInfo">
                <ul class="list">
                    <BookViewFirst v-for="book in publishBookInfo.books" :key="book.id" :bookinfo="book" />

                </ul>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.publish {
    height: 100vh;
    width: 100vw;

    .publish-title {
        height: 50rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: aqua;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        padding: 0 8rem;
        width: 100%;

        img {
            width: 25rem;
        }

        span {
            font-size: 17rem;
            color: #2d2d2d;
        }
    }

    .publish-list {
        width: 100%;
        height: calc(100vh - 50rem);
        overflow: auto;
        padding: 8rem 8rem 0;
    }
}
</style>
